/**
 * 审批流步骤包装组件
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Card, Col, Row, Steps, Tag } from 'antd';
import styles from '@/pages/OnboardAndLeave/AdjustPost/Add/Wrap.less';

const { Step } = Steps;

const getActualArr = str => (str ? str.split(',').filter(item => item).join(',') : '');

const getDescription = (index, currentUser, status, item, processTaskInstances, assigneeEmployeeNames = '') => {
    // 如果是发起时要显示发起人姓名，后端给不了，只能前端塞进去
    if (status !== 'finish' && index === 0 && processTaskInstances.length === 0) return currentUser.employeeName;
    if (status === 'process') return getActualArr(assigneeEmployeeNames);
    if (status !== 'finish' && status !== 'error') return '';
    const findInstance = processTaskInstances.find(instance => instance.taskTemplateId === item.taskTemplateId);

    if (findInstance) {
        return status === 'finish' ? getActualArr(findInstance.actualAssigneeEmployeeName) : getActualArr(findInstance.assigneeEmployeeNames)
    }
    return '';
};

const ApplyStep = ({
    isSuccess,
    processTaskTemplates,
    processTaskInstances,
    title,
    lastConfirmDate,
    status,
    loading,
    getStatus,
    children,
    currentProcessTaskInstance,
    currentUser
}) => (
    <Card loading={loading} bordered={false}>
        {title && (
            <Row className={styles.titleBox} type="flex">
                <Col>
                    <h3 className={styles.title}>{title}</h3>
                </Col>
                {!isSuccess && status && (
                    <Col>
                        <Tag color="orange" className={styles.status}>{status}</Tag>
                    </Col>
                )}
                {
                    !isSuccess && lastConfirmDate && (
                        <Col>
                            <span className={styles.time}>最晚确认时间：{lastConfirmDate}</span>
                        </Col>
                    )
                }
            </Row>
        )}
        <Steps
            className={styles.steps}
        >
            {processTaskTemplates.map(({ id, taskName, taskTemplateId }, index) => {
                const statusResult = getStatus(taskTemplateId, index);
                return (
                    <Step
                        status={statusResult}
                        title={taskName}
                        description={
                            getDescription(
                                index,
                                currentUser,
                                statusResult,
                                processTaskTemplates[index],
                                processTaskInstances,
                                currentProcessTaskInstance.assigneeEmployeeNames)
                        }
                        key={id}
                    />
                )
            })}
        </Steps>
        {children}
    </Card>
);

ApplyStep.propTypes = {
    // 所有节点
    processTaskTemplates: PropTypes.array.isRequired,
    // 流程标题
    title: PropTypes.string,
    // 流程状态描述
    status: PropTypes.string,
    // 最晚确认时间
    lastConfirmDate: PropTypes.string,
    loading: PropTypes.bool,
    // 流程是否已经完成
    isSuccess: PropTypes.bool
};
ApplyStep.defaultProps = {
    title: '',
    status: '',
    lastConfirmDate: '',
    loading: false,
    isSuccess: false
};

export default ApplyStep;
